<template>
   <el-container class="Main-container">
       <!-- 头部 -->
       <el-header>
           <div>
               <img src="../assets/logo.png" alt="">
               <span>扶贫助农平台</span>
           </div>
           <div>
               <el-button type="primary" @click="back">退出</el-button>
           </div>
       </el-header>
       <!-- 主体 -->
       <!-- 侧边栏 -->
       <el-container>
       <el-aside width="210px">
           <!-- 导航栏 -->
           <el-menu :router="true"
           background-color="#57d6fd"
           text-color="whitesmoke"
            >
              <!-- 首页 -->
              <!-- <template slot="title">
               <i class="el-icon-location"></i>
               <span>首页</span>
              </template> -->
                <el-menu-item index="/main">
                <i class="el-icon-s-home"></i>
               <span slot="title">首页</span>
                </el-menu-item>
              
              <!-- 扶贫 -->
               <el-submenu index="/c">
              <template slot="title">
               <i class="el-icon-s-comment"></i>
               <span>扶贫政策管理</span>
              </template>
                <el-menu-item index="/fupin">
                <i class="el-icon-user"></i>
               <span>扶贫扶农政策</span>
                </el-menu-item>
              </el-submenu>
               <!-- 志愿者 -->
               <el-submenu index="/e">
              <template slot="title">
               <i class="el-icon-user-solid"></i>
               <span>志愿者管理</span>
              </template>
                <el-menu-item index="/zhiyuanzhe">
                <i class="el-icon-user"></i>
               <span>志愿者信息</span>
                </el-menu-item>
              </el-submenu>
               <!-- 留言板 -->
               <el-submenu index="/g">
              <template slot="title">
               <i class="el-icon-date"></i>
               <span>留言板管理</span>
              </template>
                <el-menu-item index="/liuyanban">
                <i class="el-icon-date"></i>
               <span>留言板信息</span>
                </el-menu-item>
              </el-submenu>
               <!-- 轮播图-->
               <el-submenu index="/h">
              <template slot="title">
               <i class="el-icon-loading"></i>
               <span>轮播图管理</span>
              </template>
                <el-menu-item index="/lunbotu">
                <i class="el-icon-user"></i>
               <span>轮播图信息</span>
                </el-menu-item>
              </el-submenu>
               <!-- 贫困户 -->
               <el-submenu index="/k">
              <template slot="title">
               <i class="el-icon-s-check"></i>
               <span>贫困户管理</span>
              </template>
                <el-menu-item index="/pinkunhu">
                <i class="el-icon-user"></i>
               <span>贫困户信息</span>
                </el-menu-item>
              </el-submenu>
               <!-- 用户 -->
               <el-submenu index="/m">
              <template slot="title">
               <i class="el-icon-s-custom"></i>
               <span>用户管理</span>
              </template>
                <el-menu-item index="/user">
                <i class="el-icon-user"></i>
               <span>用户信息</span>
                </el-menu-item>
              </el-submenu>
              <!-- 收藏 -->
              <el-submenu index="/q">
              <template slot="title">
               <i class="el-icon-s-flag"></i>
               <span>收藏管理</span>
              </template>
                <el-menu-item index="/shoucang">
                <i class="el-icon-s-flag"></i>
               <span>收藏信息</span>
                </el-menu-item>
              </el-submenu>
           </el-menu>
       </el-aside>
       <el-main>
         <router-view/>
       </el-main>
       </el-container>
   </el-container>

</template>
<script>
export default {
  methods:{
    back(){
      this.$router.push('/');
    }
  }
}
</script>
<style scoped lang="scss">
.Main-container{
    height: 100%;
}
.el-header{
    // border: 1px solid red;
    background: #57d6fd;
    // background: -moz-linear-gradient(top, #47A2FF 0%, #57d6fd 100%);
    color:whitesmoke;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div{
        display: flex;
        align-items: center;
      img{
        width: 50px;
        border-radius: 10px;
        margin-right: 20px;
    }
    } 
}
.el-aside{
    // border: 1px solid blue;
    background: #CCFFFF ;
    // background-color: #333;
    height: 100%;
}
</style>